<template>
  <view class="input-container">
    <input
      v-model="inputValue"
      :placeholder="placeholder"
      :type="type"
      @input="handleInput"
    />
    <text class="error" v-if="error">{{ error }}</text>
  </view>
</template>

<script>
export default {
  props: {
    value: String,
    placeholder: String,
    rules: Array,
    type: {
      type: String,
      default: 'text',
    },
  },
  data() {
    return {
      inputValue: this.value,
      error: '',
    };
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal;
    },
  },
  methods: {
    handleInput() {
      this.$emit('input', this.inputValue);
      this.validate();
    },
    validate() {
      if (this.rules) {
        for (let rule of this.rules) {
          const result = rule(this.inputValue);
          if (typeof result === 'string') {
            this.error = result;
            return;
          }
        }
      }
      this.error = '';
    },
  },
};
</script>

<style scoped>
.input-container {
  width: 100%;
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
</style>
